<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Managment System</title>
    <!-- CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- jQuery and JS bundle w/ Popper.js -->
    <script src="/js/jquery.slim.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <h1>Employee List</h1>
        <a th:href="@{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3">Add Employee</a>
        <table class="table table-striped table-bordered table-hover">
            <thead class="thead-light">
                <tr>
                    <th><a th:href="@{'/page/'+${currentPage}+'?sortField=firstName&sortDir='+${reverseSortDir}}">Employee First Name</a></th>
                    <th><a th:href="@{'/page/'+${currentPage}+'?sortField=lastName&sortDir='+${reverseSortDir}}">Employee Last Name</a></th>
                    <th><a th:href="@{'/page/'+${currentPage}+'?sortField=email&sortDir='+${reverseSortDir}}">Employee Email</a></th>
                    <th>actions</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="employee:${listEmployees}">
                    <td th:text="${employee.firstName}"></td>
                    <td th:text="${employee.lastName}"></td>
                    <td th:text="${employee.email}"></td>
                    <td><a th:href="@{/showFromForUpdate/{id}(id=${employee.id})}" class="btn btn-primary">Update</a> <a
                            th:href="@{/deleteEmployee/{id}(id=${employee.id})}" class="btn btn-danger">Delete</a></td>
                </tr>
            </tbody>
        </table>
        <div th:if="${totalPages > 1}">
            <div class="row col-sm-10">
                <div class="col-sm-2">
                    Total Rows: [[${totalItems}]]
                </div>
                <div th:class=|col-sm-${totalPages}|>
                    <span th:each="i:${#numbers.sequence(1,totalPages)}">
                        <a th:if="${currentPage != i}" th:href="@{'/page/'+${i}+'?sortField=firstName&sortDir='+${sortDir}}">[[${i}]]</a>
                        <span th:unless="${currentPage != i}">[[${i}]]</span> &nbsp;&nbsp;
                    </span>
                </div>
                <div class="col-sm-1">
                    <a th:if="${currentPage < totalPages}" th:href="@{'/page/'+${currentPage + 1}+'?sortField=firstName&sortDir='+${sortDir}}">Next</a>
                    <span th:unless="${currentPage < totalPages}">Next</span>
                </div>
                <div class="col-sm-1">
                    <a th:if="${currentPage < totalPages}" th:href="@{'/page/'+${totalPages}+'?sortField=firstName&sortDir='+${sortDir}}">Last</a>
                    <span th:unless="${currentPage < totalPages}">Last</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>